<template>
    <div class="page">
        <div class="search-card">
            <el-form :inline="true">
                <el-form-item label="职位名称:">
                    <el-input placeholder="请输入要搜索的职位关键字" v-model="searchParams.name" style="width:300px;"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="loadData">搜索</el-button>
                <el-button @click="create">新增</el-button>
            </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="id" width="80" label="ID"/>
            <el-table-column prop="name" label="职位"/>
            <el-table-column prop="createTime" label="创建时间"/>
            <el-table-column prop="updateTime" label="更新时间"/>
            <el-table-column label="操作" width="150">
                <template slot-scope="data">
                    <el-link type="primary" @click="modify(data.row)">修改</el-link>
                    <el-popconfirm title="请确认是否删除此职位?" @confirm="remove(data.row)">
                        <el-link class="ml-1" slot="reference" type="primary">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination
                :current-page="searchParams.page_no"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="searchParams.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="setPage"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from "@/services/api";

export default {
    name: "Job",
    data() {
        return {
            searchParams: {
                page_no: 1,
                page_size: 15,
                name: ''
            },
            totalCount: 0,
            tableData: []
        }
    },
    mounted() {
        this.loadData();
    },
    methods: {
        remove(data) {
            const id = data.id; // 获取到当前数据的id
            api.post("/job/update", {status: 0, id: id}).then(result => {
                // 保存成功 刷新数据
                this.loadData();
            }).catch(err => {
                this.$message(err.message)
            })
        },
        modify(data) {
            const id = data.id, name = data.name; // 获取到当前数据的id和名称

            this.$prompt('请输入职位名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: name,
                inputValidator: function (value) {
                    return value != null && value.length != 0
                },
                inputErrorMessage: '职位名称不能为空'
            }).then(({value}) => {
                // 提交数据到后端
                api.post("/job/update", {name: value, id: id}).then(result => {
                    // 保存成功 刷新数据
                    this.loadData();
                }).catch(err => {
                    this.$message(err.message)
                })
            }).catch();
        },
        create() {
            this.$prompt('请输入职位名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator: function (value) {
                    return value != null && value.length != 0
                },
                inputErrorMessage: '职位名称不能为空'
            }).then(({value}) => {
                // 提交数据到后端
                api.post("/job/create", {name: value}).then(result => {
                    // 保存成功 刷新数据
                    this.loadData();
                }).catch(err => {
                    this.$message(err.message)
                })
            }).catch();
        },
        setPage(page) {
            this.searchParams.page_no = page; // 设置查询的页码
            this.loadData(); // 重新查询数据
        },
        loadData() {
            api.get("/job/list", this.searchParams).then(data => {
                this.tableData = data.records; // 数据列表
                this.totalCount = data.total; // 总条数
            })
        }
    }
}
</script>

<style scoped>

</style>